{% extends "base.html" %}
{% load static %}
{% block module %}
  <link rel="stylesheet" type="text/css" href="{% static '/css/login.css' %}">
  <style>
    .main {
      display: flex;
      background-image: url("{% static '/img/login_bg.jpg' %}");
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }
  </style>
{% endblock %}

{% block body %}
  <div class="main">
    <div class="left">
      <h1>自动化测试平台</h1>
    </div>
    <div class="right">
      <h1>登录</h1>
      <form action="{% url 'index:login' %}" method="POST">
        {% csrf_token %}
        <input type="text" name="username" class="username" placeholder="用户名" required />
        <input type="password" name="password" class="password" placeholder="密码" required />
        <button type="submit">登录</button>
      </form>

    </div>
  </div>
  <script>
  $(function(){
      
      $("form").submit(function(e) {
          e.preventDefault();
          ajax_data = {
            url: $("form").attr("action"),
            method: $("form").attr("method"),
            data: $(this).serialize(),
          }
          console.log("method:" + ajax_data.method);
          ajax({
              type: ajax_data.method,
              url: ajax_data.url,
              data: ajax_data.data,
              success: function(data){

                  window.location.href = '{% url "index:index" %}';
              },
              error: function(xhr, status, error) {
                  console.log("出错了:", status, error);
              }
          })
      })
      
  })
  </script>
{% endblock %}